import React, { useEffect } from 'react';
import { Input, Select, Form, } from "antd"
import Cascader from '@/components/Cascader';
import { state as states } from "@/stores/Merchant"
import { useSnapshot } from "valtio"
import Maps from "@/components/Maps"
type Form = {
    areaName: string;
    brandDesc: string;
    brandName: string;
    headName: string;
    phone: string;
    shopAddress: string;
}
interface FormItemProps {
    form: Form;
    setForm: React.Dispatch<React.SetStateAction<{
        areaName: string;
        brandDesc: string;
        brandName: string;
        headName: string;
        phone: string;
        shopAddress: string;

    }>>
}

const PartitionForm = (props: FormItemProps) => {
    let { form, setForm } = props;
    let state = useSnapshot(states)
    useEffect(() => {

    }, [])
    return (
        <div>
            <Form
                name="basic" autoComplete="off" style={{ padding: '20px' }}>
                <Form.Item label=" 分区名称">
                    <Input
                        value={form.areaName}
                        onChange={(e) => {
                            setForm({ ...form, areaName: e.target.value })
                        }}
                        placeholder='请输入店铺名称'
                    />
                </Form.Item>
                <Form.Item label=" 所属品牌">
                    <Select
                        defaultValue="请选择"
                        value={form.brandName}
                        options={[...state.brandCate]}
                    />
                </Form.Item>
                <Form.Item label=" 联系人">
                    <Input placeholder="请输入联系人"
                        value={form.headName}
                        onChange={(e) => {
                            setForm({ ...form, headName: e.target.value })
                        }}
                    /></Form.Item>
                <Form.Item label=" 手机号">
                    <Input value={form.phone}
                        placeholder='请输入手机号'
                        onChange={(e) => {
                            setForm({ ...form, phone: e.target.value })
                        }} /> </Form.Item>
                <Form.Item label=" 店铺地址">
                    <div>
                            <Cascader style={{ width: "94%",marginBottom:"30px" }} value={form.shopAddress} onChange={(e) => {
                                setForm({ ...form, shopAddress: e })
                            }}></Cascader>
                            <div className='pt-15'>
                            <Maps position={form.shopAddress}></Maps>

                            </div>
                    </div>
                </Form.Item>
           
            </Form>
        </div>
    );
};

export default PartitionForm;